<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2021-11-10 14:18:43
 * @LastEditTime: 2022-07-04 12:45:28
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="basic">
    <el-form ref="form" label-width="90px" v-if="enterpriseType == 1">
      <el-form-item label="上年销售额:">
        <el-input v-model.trim="infoData.enterpriseName" size="small"></el-input>
      </el-form-item>
      <el-form-item label="企业地址:">
        <el-input v-model.trim="infoData.enterpriseName" size="small"></el-input>
      </el-form-item>
      <el-form-item label="企业简介:">
        <el-input v-model.trim="infoData.enterpriseName" size="small"></el-input>
      </el-form-item>
      <el-form-item label="经营范围:">
        <el-input v-model.trim="infoData.enterpriseName" size="small"></el-input>
      </el-form-item>
      <el-form-item label="首页宣传图:">
        <el-input v-model.trim="infoData.enterpriseName" size="small"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button size="small" class="commonBtn1" style="width: 280px" @click="subMit"> 提交 </el-button>
      </el-form-item>
    </el-form>
    <div v-else class="basic_content">
      <div style="color: #fa7355; margin-bottom: 20px">
        <i class="iconfont icon-tishi" style="color: #fa7355; margin-right: 10px; font-size: 16px"></i>
        <span style="font-size: 14px">部分信息将在供应商首页展示，请如实填写。</span>
      </div>
      <el-form ref="form" label-width="100px">
        <el-form-item label="企业logo：" style="width: auto; margin-bottom: 16px">
          <div class="upload-wrap">
            <el-upload
              class="upload-demo"
              :headers="loadHeader"
              :multiple="false"
              :show-file-list="false"
              accept=".jpg,.png"
              :action="urlUpload"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
            >
              <img v-if="infoData.logo" :src="infoData.logo" class="avatar" />
              <i class="iconfont icon-yunpanlogo--" v-else style="font-size: 56px; color: #999"></i>
              <p v-if="!infoData.logo" style="color: #999">上传照片</p>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="上年销售额：" style="width: auto; margin-bottom: 12px">
          <el-input
            v-model.trim="infoData.salesVolume"
            size="small"
            style="width: 280px"
            placeholder="请输入上年销售额"
          >
          </el-input>
          万元
        </el-form-item>
        <el-form-item label="注册资金：" style="width: auto; margin-bottom: 12px">
          <el-input
            v-model.trim="infoData.registeredCapital"
            size="small"
            style="width: 280px"
            placeholder="请输入注册资金"
          >
          </el-input>
          万元
        </el-form-item>
        <el-form-item label="企业地址：" style="width: 700px; margin-bottom: 16px">
          <div class="datebox">
            <tool-tip-input
              :placeholder="'请输入企业地址'"
              style="width: 100%"
              :size="'small'"
              :deviationContent="infoData.address"
              v-model.trim="infoData.address"
            ></tool-tip-input>
          </div>
        </el-form-item>
        <el-form-item label="企业简介：" style="width: 700px; margin-bottom: 20px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3 }"
            placeholder="请输入企业简介"
            v-model.trim="infoData.introduce"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="经营范围：" style="width: 700px; margin-bottom: 20px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3 }"
            placeholder="请输入经营范围"
            v-model.trim="infoData.businessScope"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="主营品牌：" style="width: 700px; margin-bottom: 20px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3 }"
            placeholder="请输入主营品牌"
            v-model.trim="infoData.mainBrand"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="企业荣誉：" style="width: 700px; margin-bottom: 16px">
          <element-edit :option="editorOption" ref="edit" :infoValue="infoData.enterpriseHonor"></element-edit>
        </el-form-item>
        <el-form-item label="企业相册：" style="width: 700px; margin-bottom: 0">
          <el-button size="small" class="commonBtn" @click="uploadClick"> 上传图片 </el-button>
          <div style="color: #fa7355; font-size: 14px; line-height: 14px; margin-top: 6px; margin-bottom: 20px">
            自定义文件(png、jpg、jpeg、pdf)
          </div>
          <div v-if="infoData.fileUploadInfoList.length" class="img_box">
            <div
              v-for="(item, index) in infoData.fileUploadInfoList"
              :key="index"
              class="img_item"
              :style="{ marginRight: (index + 1) % 4 == 0 ? '0' : '30px' }"
            >
              <i class="iconfont icon-jiufuqianbaoicon08" @click="imgRemove(index)"></i>
              <el-image
                style="width: 126px; height: 126px; border: 1px solid #999; border-radius: 5px"
                :src="item.fileAddress"
              ></el-image>
              <div style="line-height: 20px; text-align: center">
                <tool-tip-node :oneLine="true" :value="item.fileName"></tool-tip-node>
              </div>
            </div>
          </div>
          <div class="upload-photo">
            <el-upload
              class="photo-demo"
              :headers="loadHeader"
              multiple
              accept=".jpg,.png,.jpeg"
              :action="urlUpload"
              :on-success="photoUploadSuccess"
              :before-upload="photoBeforeUpload"
              :show-file-list="false"
              :file-list="fileList"
            >
              <template slot="trigger">
                <div ref="biddUpload"></div>
              </template>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>

      <div class="basicBtn">
        <el-button size="small" class="commonBtn1" @click="subMit" style="width: 280px; margin-left: 100px">
          提交
        </el-button>
      </div>

      <!-- <button @click="subMit" style="width: 130px; height: 32px; background: red">点击</button> -->
    </div>
  </div>
</template>

<script>
import ElementEdit from '../../../../components/ElementEdit.vue'
import ToolTipInput from '../../../../components/ToolTipInput.vue'
import ToolTipNode from '../../../../components/ToolTipNode.vue'
export default {
  components: { ElementEdit, ToolTipInput, ToolTipNode },
  data() {
    return {
      urlUpload: this.GLOBAL.weburl + '/api/file/upload',
      fileList: [],
      editorOption: [
        // ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
        // [{ indent: '-1' }, { indent: '+1' }], //缩进
        // [{ direction: 'rtl' }], //文本方向
        // [{ align: [] }], //对齐方式
        ['clean'], //清除字体样式
        ['image'] //上传图片、上传视频(video)、超链接(link)
      ],
      enterpriseType: localStorage.getItem('enterpriseType'),
      infoData: {
        logo: '',
        address: '',
        salesVolume: '',
        registeredCapital: '',
        fileUploadInfoList: [],
        mainBrand: '',
        introduce: '',
        enterpriseHonor: '',
        businessScope: ''
      },
      num: 0,
      timer: null,
      fileSuccess: true,
      fileSuccess2: true
    }
  },
  computed: {
    loadHeader() {
      let token = this.common.getCookie('materialsToken')
      const header = {}
      header[this.GLOBAL.tokenName] = token
      return header
    }
  },
  mounted() {
    this.getInformation()
  },
  methods: {
    imgRemove(index) {
      this.infoData.fileUploadInfoList.splice(index, 1)
      this.fileList.splice(index, 1)
      this.num = this.fileList.length
    },
    uploadClick() {
      this.$refs.biddUpload.click()
    },
    // 企业logo上传成功时的回调
    uploadSuccess(val, e, el) {
      if (e.response.code != 0) {
        this.$message.error(e.response.msg)
        return false
      }
      this.infoData.logo = e.response.data
      this.fileSuccess = true
      this.$message.success('上传成功')
    },
    // 文件上传前进行文件大小检测
    beforeUpload(file) {
      // 文件未上传完毕不能提交
      this.fileSuccess = false
      const isLt = file.size / 1024 / 500 <= 1
      if (!isLt) {
        this.$message.error('企业logo图片大小不能超过500kb,请检查文件大小并重新尝试')
      }
      return isLt
    },
    photoUploadSuccess(val, e, el) {
      if (e.response.code != 0) {
        this.$message.error(e.response.msg)
        return false
      }
      this.num++
      if (this.num == el.length) {
        this.num = el.length
        this.fileSuccess2 = true
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.$message.success('上传成功')
      }, 200)
      this.fileList = el
      this.infoData.fileUploadInfoList.push({
        fileAddress: e.response.data,
        fileName: e.name,
        type: 2,
        whoId: localStorage.getItem('enterpriseId')
      })
    },
    photoBeforeUpload(file) {
      // 文件未上传完毕不能提交
      this.fileSuccess2 = false
      const isLt = file.size / 1024 / 1024 / 10 <= 1
      if (!isLt) {
        this.$message.error('单张图片大小不能超过10m,请检查文件大小并重新尝试')
      }
      return isLt
    },
    subMit() {
      if (
        !this.$refs.edit.fileSuccess ||
        !this.$refs.edit.fileCopyUpload ||
        !this.$refs.edit.filedropUpload ||
        !this.fileSuccess ||
        !this.fileSuccess2
      ) {
        this.$message.error('请等待文件上传完毕')
        return
      }
      if (this.infoData.salesVolume && !this.common.fieldTest('decimal', this.infoData.salesVolume)) {
        this.infoData.salesVolume = ''
        this.$message.error('请输入正确的销售金额,最多支持8位数以及四位小数')
        return
      } else if (
        this.infoData.registeredCapital &&
        !this.common.fieldTest('decimal', this.infoData.registeredCapital)
      ) {
        this.infoData.registeredCapital = ''
        this.$message.error('请输入正确的注册金额,最多支持8位数以及四位小数')
        return
      }
      // 获取富文本组件的值
      this.infoData.enterpriseHonor = this.$refs.edit.value
      this.saveInformation()
    },
    saveInformation() {
      this.$https({
        url: '/enterpriseInfo/addInfo',
        data: this.infoData,
        method: 'post'
      })
        .then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getInformation() {
      this.$https({
        url: '/enterpriseInfo/getDetail?enterpriseId=' + localStorage.getItem('enterpriseId'),
        method: 'post'
      })
        .then(res => {
          if (res.code == 0) {
            if (res.data) {
              this.infoData = res.data
            }

            if (this.infoData.logo == null) {
              this.infoData.logo = ''
            }
            this.fileList = this.infoData.fileUploadInfoList ? [...this.infoData.fileUploadInfoList] : []
            this.num = this.fileList.length
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
#basic {
  .avatar {
    height: 108px;
    width: 108px;
  }
  .datebox {
    display: flex;
  }
  /deep/ .el-form-item__content {
    color: #333;
  }
  /deep/.el-upload--picture-card:hover,
  /deep/.el-upload:focus {
    border-color: #fa7355;
    color: #fa7355;
  }
  .img_box {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
  }
  .img_item {
    width: 126px;
    margin-right: 30px;
    line-height: 0;
    position: relative;
    .icon-jiufuqianbaoicon08 {
      position: absolute;
      font-size: 24px;
      color: red;
      z-index: 9;
      cursor: pointer;
      top: 0px;
      right: -12px;
      line-height: 0;
    }
  }

  .upload-wrap {
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    width: 108px;
    /deep/ .el-upload {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 108px;
      height: 108px;
    }
  }
  .upload-photo {
    display: none;
  }
  .basic_content {
    position: relative;
  }
}
</style>
